<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/html" id="operation">
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">更新</button>
    </script>
    <script type="text/html" id="toolbar">
        <button onclick="handleRemoveAny()" type="button" class="layui-btn layui-btn-danger layui-btn-xs"><i class="layui-icon layui-icon-delete"/>批量删除 </button>
        <button onclick="openAddForm()" type="button" class="layui-btn layui-btn-normal layui-btn-xs"><i class="layui-icon layui-icon-addition"></i>添加</button>
        <!-- 1 显示搜索表单 -->
        <div class="layui-inline">
            <form action="" class="layui-form">
                <div class="layui-input-inline">
                    <input type="text" name="search" id="search" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button onclick="handleSearch()" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-search"> </i></button>
                </div>
            </form>
        </div>
    </script>
</head>
<body>
<table id="hero" lay-filter="test"></table>
<script type="text/javascript">
    layui.use(["table","layer","form"],function() {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        table.render({
            elem: "#hero",
            cols: [[
                {type: "checkbox"},
                {title: "编号", field: "id"},
                {title: "姓名", field: "name"},
                {title: "电话", field: "mobile"},
                {title: "地址", field: "address"},
                {title: "操作", toolbar: "#operation"}

            ]],
            url: "/section/sections",
            page: true,
            limits: [5, 10, 20],
            limit: 5,
            toolbar: "#toolbar",
        })
        //监听lag-filter为test的表格的工具按钮被单击的事件
        table.on("tool(test)",function(obj){//obi.event:按钮里的lay-event值//obi.data;该条的所有数据
            //如果是更新操作
            if(obj.event=="edit"){
                layer.open({
                    type:1,
                    content:$("#updateForm").html(),
                    success:function(layerObj,index){
                        //updateForm为表单lay-filter 的值
                        form.val("updateForm",obj.data)
                        //监听更新表单的提交事件
                        form.on("submit(update-go)",function(data){
                            console.log(data.field);
                            $.ajax({
                                url:"/section/sections",
                                type:"put",
                                data:JSON.stringify(data.field),
                                contentType:"application/json",
                                dataType:"json",
                                success:function(result){
                                    if(result.status=="success"){
                                        //关闭弹出层
                                        layer.close(index);
                                        //刷新页面
                                        table.reload("hero")


                                    }else{
                                        alert("更新失败")
                                    }
                                }
                            })

                            return false;
                        })


                    }

                })
            }else if(obj.event=="delete"){
                //如果是删除操作
                $.ajax({
                    url:"/section/sections/"+obj.data.id,
                    type:"delete",
                    dataType:"json",
                    success:function(result){
                        if(result.status=="success"){
                            //刷新表单
                            table.reload("hero");
                        }  else{
                            alert("删除失败")
                        }
                    }
                })
            }
        })

    })
</script>
<!--添加弹出层-->
<script id="addForm" type="text/html">
    <form  class="layui-form" action="" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" class="layui-input" id="mobile" name="mobile">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" class="layui-input" id="address" name="address">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="go">添加</button>
                <button type="button" class="layui-btn" id="add-form-cancel">取消</button>

            </div>
        </div>
    </form>
</script>
<!--弹出更新层-->
<script id="updateForm" type="text/html">
    <form class="layui-form" action="" lay-filter="updateForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" class="layui-input" id="mobile1" name="mobile">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" class="layui-input" id="address1" name="address">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="width:200px">
                <button type="submit" class=" layui-btn" lay-submit lay-filter="update-go" style="width:80px">更新</button>
                <button type="button" class=" layui-btn" id="update-form-cancel" style="width:80px">取消</button>
            </div>
        </div>
    </form>
</script>
<script type="text/javascript">
    function openAddForm() {
        layui.use(["layer", "form", "laydate","table"], function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            var form = layui.form;
            var table=layui.table;
            layer.open({
                type: 1,
                content: $("#addForm").html(),
                success: function (layerObj, index) {
                    console.log($("form[lay-filter=addForm]"));

                    form.on("submit(go)",function(data){
                        console.log(data);
                        console.log(arguments);

                        console.log("11111111111111111111111111111111111111111111155555555555555555555555")
                        $.ajax({
                            url: "/section/sections",
                            data: JSON.stringify(data.field),

                            type: "post",
                            dataType: "json",
                            contentType: "application/json",
                            success: function (result) {
                                if (result.status == "success") {
                                    //关闭弹出层
                                    layer.close(index);
                                    //刷新页面
                                    table.reload("hero");
                                } else {
                                    alert("添加失败");
                                }
                            }
                        })

                        return false;
                    })

                }
            })

        })
    }
</script>
<script type="text/javascript">
    function handleRemoveAny(){
        layui.use("table",function(){
            var table=layui.table;
            var $=layui.jquery;
            //根据表格id值获取所有选中的行
            var status=table.checkStatus("hero");
            status.data;//获取到所有选中行的数据
            //获取所有选中行的id；
            var ids=[];
            for(var i=0;i<status.data.length;i++){
                ids[i]=status.data[i].id;
            }
            if(ids.length>0){
                //发起ajax请求
                $.ajax({
                    url:"/section/sections",
                    type:"delete",
                    data:JSON.stringify(ids),
                    dataType:"json",
                    contentType:"application/json",
                    success:function(result){
                        if(result.status=="success"){
                            table.reload("hero");
                        }else{
                            alert("删除失败");
                        }
                    }
                })
            }else{
                alert("你！没！选！我！咋！删！");
            }
        })
    }
</script>
<script type="text/javascript">
    function handleSearch(){
        layui.use("table",function(){
            var table=layui.table;
            var $=layui.jquery;
            table.reload("hero",{
                url:"/section/sections",
                where:{
                    "search":$("#search").val(),
                    "page":1,
                }
            })
        })
    }
</script>

</body>
</html>